<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<div class="row mb-4">
    <div class="col-md-3">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">总答题数</h5>
                <p class="card-text" id="totalCount">-</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">正确题数</h5>
                <p class="card-text" id="correctCount">-</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">错误题数</h5>
                <p class="card-text" id="wrongCount">-</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">正确率</h5>
                <p class="card-text" id="accuracy">-</p>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h4 class="mb-0">答题记录</h4>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>题目</th>
                        <th>分类</th>
                        <th>你的答案</th>
                        <th>正确答案</th>
                        <th>结果</th>
                        <th>答题时间</th>
                    </tr>
                </thead>
                <tbody id="recordList">
                    <!-- 答题记录将通过JavaScript动态加载 -->
                </tbody>
            </table>
        </div>
        <nav aria-label="Page navigation">
            <ul class="pagination justify-content-center" id="pagination">
                <!-- 分页将通过JavaScript动态加载 -->
            </ul>
        </nav>
    </div>
</div>

<script>
$(document).ready(function() {
    var currentPage = 1;
    var pageSize = 10;

    // 加载统计信息
    function loadStats() {
        $.get('${pageContext.request.contextPath}/answer-record/api/stats', function(response) {
            if (response.code === 200) {
                var stats = response.data;
                $('#totalCount').text(stats.totalAnswered);
                $('#correctCount').text(stats.correctCount);
                $('#wrongCount').text(stats.wrongCount);
                $('#accuracy').text(stats.accuracy + '%');
            }
        });
    }

    // 加载答题记录
    function loadRecords(page) {
        $.get('${pageContext.request.contextPath}/answer-record/api/list', {
            page: page,
            size: pageSize
        }, function(response) {
            if (response.code === 200) {
                var records = response.data.list;
                var total = response.data.total;
                var html = '';

                records.forEach(function(record) {
                    html += '<tr>';
                    html += '<td>' + record.questionTitle + '</td>';
                    html += '<td>' + record.categoryName + '</td>';
                    html += '<td>' + record.answer + '</td>';
                    if(record.isMultiple === 1){
                        html += '<td>' + record.correctAnswers + '</td>';
                    }else{
                        html += '<td>' + record.correctAnswer + '</td>';
                    }

                    html += '<td>' + getResultBadge(record.correct) + '</td>';
                    html += '<td>' + formatDate(record.createdAt) + '</td>';
                    html += '</tr>';
                });

                $('#recordList').html(html);
                updatePagination(page, Math.ceil(total / pageSize));
            }
        });
    }

    // 更新分页
    function updatePagination(currentPage, totalPages) {
        var html = '';

        // 上一页
        html += '<li class="page-item ' + (currentPage <= 1 ? 'disabled' : '') + '">';
        html += '<a class="page-link" href="#" data-page="' + (currentPage - 1) + '" aria-label="Previous">';
        html += '<span aria-hidden="true">&laquo;</span></a></li>';

        // 页码
        for (var i = 1; i <= totalPages; i++) {
            if (i === currentPage) {
                html += '<li class="page-item active"><span class="page-link">' + i + '</span></li>';
            } else {
                html += '<li class="page-item"><a class="page-link" href="#" data-page="' + i + '">' + i + '</a></li>';
            }
        }

        // 下一页
        html += '<li class="page-item ' + (currentPage >= totalPages ? 'disabled' : '') + '">';
        html += '<a class="page-link" href="#" data-page="' + (currentPage + 1) + '" aria-label="Next">';
        html += '<span aria-hidden="true">&raquo;</span></a></li>';

        $('#pagination').html(html);
    }

    // 获取结果标签
    function getResultBadge(correct) {
        return correct ?
            '<span class="badge bg-success">正确</span>' :
            '<span class="badge bg-danger">错误</span>';
    }

    // 格式化日期
    function formatDate(timestamp) {
        if (!timestamp) return '-';
        var date = new Date(timestamp);
        return date.getFullYear() + '-' +
               padZero(date.getMonth() + 1) + '-' +
               padZero(date.getDate()) + ' ' +
               padZero(date.getHours()) + ':' +
               padZero(date.getMinutes());
    }

    function padZero(num) {
        return num < 10 ? '0' + num : num;
    }

    // 绑定分页点击事件
    $(document).on('click', '.pagination .page-link', function(e) {
        e.preventDefault();
        var page = $(this).data('page');
        if (page > 0) {
            currentPage = page;
            loadRecords(currentPage);
        }
    });

    // 初始化
    loadStats();
    loadRecords(currentPage);
});
</script>
